<template>
  <div class="main-header" :style="{'--bg-image': `url(${props.bgUrl})`, '--height': props.height}">
    <div class="j-header-content">
      <slot>
        <h1 class="j-header-title">{{ props.title }}</h1>
        <p class="j-header-desc">{{ props.description }}</p>
      </slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  bgUrl: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  description: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "24rem",
  },
});
</script>
<style lang="scss" scoped>
.main-header {
  position: relative;
  @include flex();
  width: 100%;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  div {
    font-size: 1.5rem;
    color: #ffffff;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .main-header {
    height: 12rem !important;
    color: var(--font-color);
  }
  .j-header-title {
    font-size: 1.5rem;
  }
  .j-header-desc {
    font-size: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .main-header {
    height: var(--height);
  }
  .j-header-title {
    font-size: 3rem;
  }
  .j-header-desc {
    font-size: 1.5rem;
  }
}
</style>
